<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
    <el-form ref="form" label-width="100px" :model="form" :rules="rules">
      <el-form-item label="品种名称" prop="breed">
        <el-input v-model.trim="form.breed" autocomplete="off" placeholder="请输入品种名称" />
      </el-form-item>
      <el-form-item label="品系名称" prop="strain">
        <el-input v-model.trim="form.strain" autocomplete="off" placeholder="请输入品系名称" />
      </el-form-item>
      <el-form-item label="批次号" prop="batchCode">
        <el-input v-model.trim="form.batchCode" autocomplete="off" placeholder="请输入批次号" />
      </el-form-item>
      <el-form-item label="出雏日期" prop="broodingDate">
        <el-date-picker v-model="form.broodingDate" placeholder="请选择出雏日期" style="width: 100%" value-format="timestamp" />
      </el-form-item>
      <el-form-item label="品种数量" prop="breedNum">
        <el-input v-model.number="form.breedNum" autocomplete="off" placeholder="请输入品种数量" type="number">
          <template slot="append">只</template>
        </el-input>
      </el-form-item>
      <el-form-item label="圈舍" prop="penHouse">
        <el-input v-model.trim="form.penHouse" autocomplete="off" placeholder="请输入圈舍" />
      </el-form-item>
      <el-form-item label="水" prop="water">
        <el-input v-model.trim="form.water" autocomplete="off" placeholder="请输入水" />
      </el-form-item>
      <el-form-item label="饲料名称" prop="feedName">
        <el-input v-model.trim="form.feedName" autocomplete="off" placeholder="请输入饲料名称" />
      </el-form-item>
      <el-form-item label="换料日期" prop="changeTime">
        <el-date-picker v-model="form.changeTime" placeholder="请选择换料日期" style="width: 100%" value-format="timestamp" />
      </el-form-item>
      <el-form-item label="每只喂养" prop="perFeed">
        <el-input v-model.trim="form.perFeed" autocomplete="off" placeholder="请输入每只喂养" type="number">
          <template slot="append">G</template>
        </el-input>
      </el-form-item>
      <el-form-item label="换料数量" prop="num">
        <el-input v-model.trim="form.num" autocomplete="off" placeholder="请输入换料数量" type="number" />
      </el-form-item>
      <el-form-item label="单位" prop="unit">
        <el-input v-model.trim="form.unit" autocomplete="off" placeholder="请输入单位" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { API_feedCreate, API_feedEdit } from '@/api/feed'
  export default {
    name: 'FeedEdit',
    data() {
      return {
        form: {
          breed: '',
          strain: '',
          batchCode: '',
          broodingDate: '',
          breedNum: '',
          penHouse: '',
          water: '',
          feedName: '',
          changeTime: '',
          perFeed: '',
          num: '',
          unit: '',
        },
        rules: {
          breed: [{ required: true, trigger: 'blur', message: '请输入品种名称' }],
          strain: [{ required: true, trigger: 'blur', message: '请输入品系名称' }],
          batchCode: [{ required: true, trigger: 'blur', message: '请输入批次号' }],
          broodingDate: [{ required: true, trigger: 'blur', message: '请选择出雏日期' }],
          breedNum: [{ required: true, trigger: 'blur', message: '品种数量(只)' }],
          penHouse: [{ required: true, trigger: 'blur', message: '请输入圈舍' }],
          injectionTime: [{ required: true, trigger: 'blur', message: '请选择疫苗注射日期' }],
          feedName: [{ required: true, trigger: 'blur', message: '请输入疫苗名称' }],
        },
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {},
    methods: {
      showEdit(row) {
        if (!row) {
          this.title = '添加'
        } else {
          this.title = '编辑'
          this.form = Object.assign({}, row)
        }
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            if (this.form.code) {
              const { message } = await API_feedEdit(this.form)
              this.$baseMessage(message, 'success')
            } else {
              const { message } = await API_feedCreate(this.form)
              this.$baseMessage(message, 'success')
            }
            this.$emit('fetch-data')
            this.close()
          } else {
            return false
          }
        })
      },
    },
  }
</script>
